<template>
  <div>
    <div class="menu">
      <div class="menu-left">
        <ul>
          <li class="menu-item" v-for="(menu,index) in menus" :key="index" :class="{current:index===currentIndex}"
          @click="clickList(index)" ref="menuList">
            <p class="text">{{menu.name}}</p>
          </li>
        </ul>
      </div>

      <div class="menu-right" ref="itemList">
        <ul>
          <li class="cate" v-for="(menu,index1) in menus" :key="index1">
            <h4 class="cate-title">{{menu.name}}</h4>
            <ul class="cate-item">
              <li v-for="(item,index2) in menu.sub" :key="index2">
                <router-link href="#" class="cate-item-wrapper" :to="{name:'goods_list',params:{category_id:item.id}}">
                  <div class="cate-item-img">
                    <img :src="item.image" alt="">
                  </div>
                  <span>{{item.name}}</span>
                </router-link>
              </li>
            </ul>
          </li>
          <li class="cate-bottom"></li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  import BScroll from 'better-scroll'
  export default {
    data(){
      return{
        menus:[],
        // currentIndex:0,
        rightLiTops:[],
        scrollY:0
      }
    },
    created() {
      this.$indicator.open({
        text:'加载中'
      })
      this.$http.get('category').then(res =>{
        this.$indicator.close()
        this.menus = res.data.data
      })
    },
    methods:{
      clickList(index){
        // this.currentIndex = index
        this.scrollY = this.rightLiTops[index]
        this.rightBscroll.scrollTo(0,-this.rightLiTops[index])
      },
      _initBScroll(){
        this.leftBscroll = new BScroll('.menu-left',{
          click:true,
          mouseWheel:true
        })
        this.rightBscroll = new BScroll('.menu-right',{
          click:true,
          mouseWheel:true,
          probeType:3
        })
        this.rightBscroll.on('scroll',(pos =>{
          // window.console.log(pos,y)
          this.scrollY = Math.abs(pos.y)
        }))
      },
      _initRightHeight(){
        let itemArray = []
        let top = 0
        itemArray.push(top)
        let allList = this.$refs.itemList.getElementsByClassName('cate')
        //将allList转换为普通数组进行遍历，记录每个元素的高度
        Array.prototype.slice.call(allList).forEach(li => {
          top += li.clientHeight
          itemArray.push(top)
        })
        let bottom = this.$refs.itemList.getElementsByClassName('cate-bottom')[0]
        bottom.style.height = this.$refs.itemList.clientHeight/1.2 + 'px'
        this.rightLiTops = itemArray
      },
      _initLeftScroll(index){
        let menu = this.$refs.menuList
        let el = menu[index]
        this.leftBscroll.scrollToElement(el,300,0,-100)
      }
    },
    watch:{
      menus(){
        this.$nextTick(() =>{
          this._initBScroll()  //初始化better-scroll
          this._initRightHeight() //初始化右侧菜单的高度
        })
      }
    },
    computed:{
      currentIndex(){
        //当scrollY改变时，修改左侧菜单的激活项
        const {scrollY,rightLiTops} = this
        //从右侧菜单查找元素
        return rightLiTops.findIndex((top,index) => {
          if (index === rightLiTops.length - 2){
            return true
          }
          if (scrollY >= top && scrollY < rightLiTops[index + 1]){
            return true
          }
        })

      }
    }
  }
</script>

<style lang="scss" scoped>
  ul {
    margin: 0;
    padding: 0;
  }
  li {
    list-style: none;
  }
  .menu {
    display: flex;
    position: absolute;
    text-align: center;
    top: 40px;
    bottom: 50px;
    width: 100%;
    overflow: hidden;
    .menu-left {
      flex: 0 0 80px;
      width: 80px;
      background: #f3f5f7;
      .menu-item {
        height: 54px;
        width: 100%;
        .text {
          width: 100%;
          line-height: 54px;
          margin-bottom: 0;
        }
      }
      .current {
        width: 100%;
        background: #fff;
        .text {
          color: red;
        }
      }
    }
    .menu-right {
      flex: 1;
      background: #fff;
      .cate {
        height: 100%;
        .cate-title {
          margin: 0;
          text-align: left;
          font-size: 14px;
          color: #333;
          font-weight: bold;
          padding: 10px;
        }
        .cate-item {
          padding: 7px 10px 10px;
          display: flex;
          overflow: hidden;
          flex-flow: row wrap;
          li {
            width: 33.3%;
            .cate-item-wrapper {
              .cate-item-img {
                width: 100%;
                img {
                  width: 70px;
                  height: 70px;
                }
              }
              span {
                display: inline-block;
                font-size: 14px;
                color: #333;
              }
            }
          }
        }
      }
    }
  }
</style>

